<template>
  <div class="cinema-detail">
    <div class="box"></div>
    <div class="top">
      <van-nav-bar
        fixed
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="cinema-info">
      <span class="name">{{ cinemaName }}</span>
      <span class="address">
        <van-icon name="location-o" />
        {{ cinemaAddress }}</span
      >
      <span class="tel">
        <!-- <span class="icon icon-tel"> -->
        <van-icon name="phone-o" />
        <span>{{ cinemaPhone }}</span></span
      >
    </div>
    <el-carousel
      :autoplay="false"
      :interval="4000"
      type="card"
      height="12rem"
      indicator-position="none"
      :initial-index="this.movieIndex"
      @change="changeCarousel"
      arrow="never"
      :loop="false"
    >
      <el-carousel-item v-for="item in cinemaFilm" :key="item.id">
        <img
          class="img"
          :src="`http://10.36.4.254:8080${item.poster}`"
          alt=""
        />
      </el-carousel-item>
    </el-carousel>
    <div
      class="movie-info"
      v-for="(item, index) in cinemaFilm"
      :key="index"
      v-show="movieIndex === index"
    >
      <span class="arrow"></span>
      <span class="main"
        ><span class="name">{{ cinemaFilm[index].name }}</span
        ><span class="score">
          <!-- <span class="num">{{ item.score.toFixed(1) }}分</span> -->
          <span style="font-size: 1rem"
            >{{ cinemaFilm[index].score }}分</span
          ></span
        ></span
      >
      <span class="intro">
        <span class="time">{{ cinemaFilm[index].movieLong }}</span
        >&nbsp;<span class="split">|&nbsp;</span
        ><span class="type">{{ cinemaFilm[index].type }}&nbsp;</span
        ><span class="split">|&nbsp;</span
        ><span class="actors">{{ cinemaFilm[index].actor }}</span>
      </span>
    </div>
    <div>
      <div>
        <cinema-foot
          v-for="item in movieSchedules"
          :key="item.id"
          :schedules="item"
          :movieName="movieID"
        ></cinema-foot>
        <span class="tishi" v-if="myCode == 0">该影院暂无这部电影的排片</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Carousel, CarouselItem } from "element-ui";
import CinemaFoot from "@/components/cinema_foot.vue";
import LyTab from "ly-tab";

Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(LyTab);
export default {
  components: {
    "cinema-foot": CinemaFoot,
  },
  data() {
    return {
      selectedId: 0,
      initMovieId: 0,
      // items: [{ lable: "7月26日" }],
      cinemaName: this.$route.query.cinemaName,
      cinemaAddress: this.$route.query.cinemaAddress,
      cinemaPhone: this.$route.query.cinemaPhone,
      cinemaId: this.$route.query.cinemaId,
      movieID: this.$route.query.movieID,
      cinemaFilm: [],
      movieSchedules: [],
      movieIndex: 0,
      index: 0,
      myCode: 1,
    };
  },
  mounted() {
    this.axios.get(`http://10.36.4.254:8080/select/HotShowFilm`).then((res) => {
      console.log(res);
      this.cinemaFilm = res.data;
      console.log("res:" + res.data);
    });
    if (this.movieID == 4) {
      this.movieIndex = 1;
    }
    if (this.movieID == 12) {
      this.movieIndex = 7;
    }
    //  this.axios
    //   .get(
    //     `http://10.36.4.254:8080/findCinemaMovieSchedule?cinemaId=${this.cinemaId}&movieId=1`
    //   )
    //   .then((res) => {
    //     console.log(res);
    //     this.movieSchedules = res.data.movieSchedules;
    //   });
    //根据电影ID获取影院时间表
    this.axios
      .get(
        `http://10.36.4.254:8080/findCinemaMovieSchedule?cinemaId=${
          this.cinemaId
        }&movieId=${this.movieID ? this.movieID : 1}`
      )
      .then((res) => {
        console.log(res);
        this.movieSchedules = res.data.movieSchedules;
        this.myCode = res.data.code;
      });
  },
  methods: {
    changeCarousel(index) {
      console.log("这是" + index);
      this.movieIndex = index;
      this.movieID = this.cinemaFilm[index].id;
      this.axios
        .get(
          `http://10.36.4.254:8080/findCinemaMovieSchedule?cinemaId=${this.cinemaId}&movieId=${this.movieID}`
        )
        .then((res) => {
          console.log(res);
          this.movieSchedules = res.data.movieSchedules;
          this.myCode = res.data.code;
          console.log("code" + this.myCode);
        });
    },

    // changeCard(index){
    //   if(this.movieID==this.cinemaFilm)
    // }
  },
};
</script>

<style scoped>
.name-ellipsis {
  font-size: 21px;
  font-weight: 700;
}
.img {
  height: 12rem;
}
/* .name {
  width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */
.actors {
  width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  font-size: 0.9rem;
}
.tishi{
  margin-left: 6rem;
  color: #79BD90;
}
.cinema-detail {
  width: 100%;
  height: 100%;
  color: #000;
}
.box {
  height: 2rem;
}
.top {
  width: 100%;
  z-index: 4;
  position: absolute;
}
.cinema-info {
  margin-top: 2rem;
  margin-left: 0.5rem;
  color: #888;
  display: flex;
  flex-flow: column;
  padding: 0.25rem;
  /* border-bottom: 1px solid #d3dce6; */
}
.address {
  width: 90%;
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.tel {
  margin-bottom: 0.2rem;
}
.movie-info {
  height: 1.4px;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-bottom: 5rem;
  margin-top: 1.5rem;
  /* margin-bottom: 1rem; */
}
.arrow {
  border: 0.2rem solid transparent;
  border-bottom: 0.2rem solid #fff;
  margin-top: -0.38rem;
  z-index: 999;
}
.main {
  font-size: 0.345rem;
}
.name {
  font-size: 1.2rem;
  line-height: 0.8rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.9rem;
}
.score {
  color: #ffb400;
  margin-left: 0.3rem;
  font-size: 0.1rem;
}
.num {
  font-size: 0.3125rem;
  font-weight: 700;
}

.el-carousel__item {
  margin-top: 0.65rem;
  margin-left: 8%;
  /* padding: 0 1rem; */
  height: 90%;
  width: 8rem;

  background-color: #d3dce6;
}
.el-carousel {
  background: linear-gradient(to bottom, #262546 0%, #11182b 100%);
}
.top /deep/ .van-nav-bar .van-nav-bar__text {
  color: black;
  font-size: 1rem;
}
.top /deep/ .van-nav-bar .van-icon {
  color: black;
}
</style>
